import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import axios from 'axios';
import { useTheme } from '../context/ThemeContext';
import DashboardLayout from '../components/DashboardLayout';

const Settings: React.FC = () => {
    const { theme } = useTheme();
    const router = useRouter();
    const [username, setUsername] = useState('');
    const [currentUserId, setCurrentUserId] = useState('');
    const [error, setError] = useState('');
    const [success, setSuccess] = useState('');

    useEffect(() => {
        const storedUsername = localStorage.getItem('username') || '';
        const userId = localStorage.getItem('userId') || '';
        setUsername(storedUsername);
        setCurrentUserId(userId);
    }, []);

    const handleSubmit = async () => {
        try {
            const token = localStorage.getItem('token');
            await axios.patch(`http://localhost:8000/api/roles/${currentUserId}`, {
                username
            }, {
                headers: { Authorization: `Bearer ${token}` }
            });
            
            // 更新本地存储的用户名
            localStorage.setItem('username', username);
            setSuccess('用户名更新成功');
            
            // 3秒后清除成功消息
            setTimeout(() => {
                setSuccess('');
            }, 3000);
        } catch (err) {
            setError('更新失败');
        }
    };

    const sidebarContent = (
        <>
            <h2 style={{ marginBottom: '20px' }}>设置</h2>
            <button 
                onClick={() => router.back()}
                style={{
                    padding: '10px',
                    backgroundColor: '#6c757d',
                    color: 'white',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    marginBottom: '20px',
                    width: '100%'
                }}
            >
                返回
            </button>
        </>
    );

    const mainContent = (
        <div style={{ maxWidth: '800px', margin: '0 auto' }}>
            <h2 style={{ marginBottom: '30px' }}>个人设置</h2>
            <div style={{ 
                backgroundColor: theme === 'light' ? 'white' : '#495057',
                padding: '20px',
                borderRadius: '8px',
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
            }}>
                <div style={{ marginBottom: '20px' }}>
                    <label style={{ 
                        display: 'block', 
                        marginBottom: '10px',
                        color: theme === 'light' ? '#666' : '#ccc'
                    }}>
                        用户名
                    </label>
                    <input
                        type="text"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                        style={{
                            width: '100%',
                            padding: '8px',
                            border: '1px solid #ddd',
                            borderRadius: '4px',
                            backgroundColor: theme === 'light' ? 'white' : '#343a40',
                            color: theme === 'light' ? 'black' : 'white'
                        }}
                    />
                </div>
                {error && (
                    <div style={{ color: '#dc3545', marginBottom: '10px' }}>
                        {error}
                    </div>
                )}
                {success && (
                    <div style={{ color: '#28a745', marginBottom: '10px' }}>
                        {success}
                    </div>
                )}
                <button
                    onClick={handleSubmit}
                    style={{
                        padding: '10px 20px',
                        backgroundColor: '#007bff',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer'
                    }}
                >
                    保存更改
                </button>
            </div>
        </div>
    );

    return (
        <DashboardLayout sidebarContent={sidebarContent}>
            {mainContent}
        </DashboardLayout>
    );
};

export default Settings; 